<template>
  <div class="editor-icon">
    <el-tabs v-model="activeName">
      <el-tab-pane label="通用" name="default">
        <el-scrollbar style="height: calc(100vh - 91px);">
          <el-collapse v-model="activeCollapse" @change="onCollapse">
            <el-collapse-item name="common" v-if="oftenIcons">
              <template #title>
                <div class="collapse-title">
                  <i v-show="!isFolderOpened('common')" class="el-icon-folder"></i>
                  <i v-show="isFolderOpened('common')" class="el-icon-folder-opened"></i>
                  {{ `常用图形(${oftenIcons.length})` }}
                </div>
              </template>
              <div class="collapse-content" @dragstart="onDragstart($event, oftenIcons)">
                <div v-show="oftenIcons.length < 1" class="empty">
                  <span>暂无常用图标</span>
                </div>
                <div class="icon" v-for="(icon, index) in oftenIcons" :key="index" :data-index="index" draggable="true">
                  <i :class="`iconfont ${icon.icon}`" :title="icon.name" v-if="icon.icon?.indexOf('icon-') > -1"
                    :data-index="index"></i>
                  <i :class="`t-icon w-[30px] h-[30px] ${icon.icon}`" :title="icon.name" v-else-if="icon.icon" :data-index="index"></i>
                  <!-- <img class="t-icon w-[30px] h-[30px]" :src="getAssetURL('../assets/resource' + icon.img)" v-else :data-index="index" /> -->
                  <img class="t-icon w-[30px] h-[30px]" :src="icon.img" v-else :data-index="index" />
                  <div style="width: 100%;height: 20px;font-size: 12px;margin-top: 10px;overflow: hidden;"> {{ icon.name
                    }}
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item v-for="(group, index) in icons" :key="index" :name="group.groupName">

              <template #title>
                <div class="collapse-title">
                  <i v-show="!isFolderOpened(group.groupName)" class="el-icon-folder"></i>
                  <i v-show="isFolderOpened(group.groupName)" class="el-icon-folder-opened"></i>
                  {{ `${group.groupName}(${group.icons.length})` }}
                </div>
              </template>

              <div class="collapse-content" @dragstart="onDragstart($event, group.icons)">
                <div class="icon" v-for="(icon, index) in group.icons" :key="index" draggable="true"
                  :data-index="index">
                  <i :class="`iconfont ${icon.icon}`" :title="icon.name" v-if="icon.icon?.indexOf('icon-') > -1"
                    :data-index="index"></i>
                  <i :class="`t-icon w-[30px] h-[30px] ${icon.icon}`" :title="icon.name" v-else-if="icon.icon" :data-index="index"></i>
                  <!-- <img class="t-icon w-[30px] h-[30px]" :src="getAssetURL('../assets/resource' + icon.img)" v-else :data-index="index" /> -->
                  <img class="t-icon w-[30px] h-[30px]" :src="icon.img" v-else :data-index="index" />
                  <div style="width: 100%;height: 20px;font-size: 12px;margin-top: 10px;overflow: hidden;"
                    :data-index="index">
                    {{ icon.name }}
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="拓扑" name="topo">
        <el-scrollbar style="height: calc(100vh - 91px);">
          <el-collapse v-model="activeCollapse" @change="onCollapse">
            <el-collapse-item v-for="(group, index) in topoIcons" :key="index" :name="group.groupName">
              <template #title>
                <div class="collapse-title">
                  <i v-show="!isFolderOpened(group.groupName)" class="el-icon-folder"></i>
                  <i v-show="isFolderOpened(group.groupName)" class="el-icon-folder-opened"></i>
                  {{ `${group.groupName}(${group.icons.length})` }}
                </div>
              </template>

              <div class="collapse-content" @dragstart="onDragstart($event, group.icons)">
                <div class="icon" v-for="(icon, index) in group.icons" :key="index" draggable="true"
                  :data-index="index">
                  <i :class="`iconfont ${icon.icon}`" :title="icon.name" v-if="icon.icon?.indexOf('icon-') > -1"
                    :data-index="index"></i>
                  <i :class="`t-icon w-[30px] h-[30px] ${icon.icon}`" :title="icon.name" v-else-if="icon.icon" :data-index="index"></i>
                  <!-- <img class="t-icon w-[30px] h-[30px]" :src="getAssetURL('../assets/resource' + icon.img)" v-else :data-index="index" /> -->
                  <img class="t-icon w-[30px] h-[30px]" :src="icon.img" v-else :data-index="index" />
                  <div style="width: 100%;height: 20px;font-size: 12px;margin-top: 10px;overflow: hidden;"
                    :data-index="index">
                    {{ icon.name }}
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="图库" name="custom">
        <el-scrollbar style="height: calc(100vh - 91px);">
          <div class="p-[5px]">
            <el-input v-model="inputValue" size="default" placeholder="搜索元件" :prefix-icon="Search" @input="doSearch" />
            <div class="collapse-content mt-[5px]">
              <div class="icon" v-for="(item, index) in searchList" draggable="true"
                @dragstart="dragPen(item.graphData.pen, $event)" :key="index" :index="index" :title="item.graphImage">
                <!-- <svg v-if="item.icon" class="l-icon" aria-hidden="true">
                <use :xlink:href="'#' + item.icon"></use>
              </svg>
              <img class="l-icon" v-else-if="item.image" :src="item.image" />
              <div class="l-icon" v-else-if="item.svg" v-html="item.svg"></div>
              <div style="width: 100%;height: 20px;font-size: 12px;margin-top: 10px;overflow: hidden;"> {{ item.name }}
              </div> -->
                <el-image lazy class="l-icon" :src="item.graphImage" />
                <el-text truncated>{{ item.graphName }}</el-text>
              </div>
            </div>
          </div>
          <el-collapse v-model="activeCollapse" @change="onCollapse" :key="key">
            <el-collapse-item v-for="(group, index) in customIcons" :key="index" :name="group.groupName"
              @click="changeState(group)">

              <template #title>
                <div class="collapse-title">
                  <i v-show="!isFolderOpened(group.groupName)" class="el-icon-folder"></i>
                  <i v-show="isFolderOpened(group.groupName)" class="el-icon-folder-opened"></i>
                  {{ `${group.groupName}` }}
                </div>
              </template>

              <div class="collapse-content">
                <div class="icon" v-for="(item, index) in group.list" :key="index" draggable="true" :data-index="index"
                  :title="item.graphName" @dragstart="dragPen(item.graphData.pen, $event)">
                  <!-- <el-tooltip class="box-item" effect="dark" :content="item.name" placement="bottom"> -->
                  <!-- <svg v-if="item.icon" class="l-icon" aria-hidden="true">
                  <use :xlink:href="'#' + item.icon"></use>
                </svg>
                <img class="l-icon" v-else-if="item.image" :src="item.image" />
                <div class="l-icon" v-else-if="item.svg" v-html="item.svg"></div> -->
                  <img class="l-icon" :src="item.graphImage" />
                  <el-text truncated>{{ item.graphName }}</el-text>
                  <!-- <el-text truncated>{{ item.name }}</el-text> -->
                  <!-- <div style="width: 100%;height: 20px;font-size: 12px;margin-top: 10px;overflow: hidden;"> {{ item.name }} </div> -->
                  <!-- </el-tooltip> -->
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
          <div style="width: 200px; height: 50px; padding: 10px; position: fixed; bottom: 0px; background-color: #fff">
            <el-button class="w-full" type="primary" @click="drawer = true"> 自定义元件库管理 </el-button>
          </div>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>

    <el-drawer v-model="drawer" title="自定义元件库管理" direction="ltr" :before-close="handleClose" append-to-body size="1000">
      <div class="flex editor-container-scss">
        <div ref='leftMenuRef'
          class="flex-none mb-[20px] dark:bg-[var(--bg-tree-list)] border-[#efefef] border-[1px] overflow-hidden">
          <div class=" h-[56px] flex items-center justify-between px-[10px] bg-[#f0f0f0]">
            <div class="flex items-center">
              <el-icon size="20" style="margin-right: 5px">
                <Grid />
              </el-icon>
              <div style="">元件列表</div>
            </div>
            <el-icon size="20" class="cursor-pointer" @click="addGroups">
              <CirclePlusFilled />
            </el-icon>
          </div>

          <div style=" cursor: pointer;" class="scroll overflow-y-scroll ">
            <div v-for="(group, index) in customIcons" :key="index" @click="changeState1(group, index)">
              <div class="grid grid-cols-[1fr_40px] gap-[10px] justify-between items-center">
                <div class="line-clamp-1">
                  <el-link truncated :underline="false" :type="checkCustomIconsIndex == group.id ? 'primary' : ''">
                    {{ group.groupName }}
                  </el-link>
                </div>
                <div>
                  <el-link :icon="EditPen" :underline="false" @click.stop="editGroups(group)"></el-link>
                  <el-link class="ml-[5px]" :icon="Delete" :underline="false"
                    @click.stop="deleteGroups(group)"></el-link>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!-- <div class="drawer-left">
          <el-button class="drawer-left-btn" @click="addGroups" > 添加 </el-button>
          <div v-for="(group, index) in customIcons" :key="index" @click="changeState1(group, index)">
            <div class="grid grid-cols-[1fr_40px] gap-[10px] justify-between items-center">
              <div class="line-clamp-1">
                <el-link truncated :underline="false" :type="checkCustomIconsIndex == group.id ? 'primary' : ''">
                  {{ group.groupName }}
                </el-link>
              </div>
              <div>
                <el-link :icon="EditPen" :underline="false" @click.stop="editGroups(group)"
                ></el-link>
                <el-link class="ml-[5px]" :icon="Delete" :underline="false" @click.stop="deleteGroups(group)"
                 ></el-link>
              </div>
            </div>
          </div>
        </div> -->
        <div class="drawer-right flex-1">
          <div class="drawer-right-top">

            <div style="width: 25%; height: 24px; display: flex">
              <el-input v-model="drawerSearchValue" size="small" placeholder="搜索元件" :prefix-icon="Search"
                @input="drawerDoSearch" style="margin-right: 10px" />
              <el-button @click="drawerDoSearch(drawerSearchValue)" size="small"> 搜索 </el-button>
            </div>
            <el-button @click="addGraphs" size="small"> 添加 </el-button>
          </div>
          <div class="flex">
            <div class="drawer-right-box" v-for="(item, index) in drawerShowList" :key="index">
              <!-- <svg v-if="item.icon" class="l-icon" aria-hidden="true">
                <use :xlink:href="'#' + item.icon"></use>
              </svg>
              <img class="l-icon" v-else-if="item.image" :src="item.image" />
              <div class="l-icon" v-else-if="item.svg" v-html="item.svg"></div>
              <div :title="item.name">
                <el-text line-clamp="1">{{ item.name }} </el-text>
              </div> -->
              <!-- <div class="l-icon"  v-html="item.svg"></div> -->
              <el-image lazy class="l-icon" :src="item.graphImage" />
              <div class="px-[14px]">
                <el-text truncated>
                  {{ item.graphName }}
                </el-text>
                <el-link class="!absolute right-0" :icon="EditPen" :underline="false"
                  @click.stop="editGraphs(item)"></el-link>
              </div>
              <el-link class="!absolute right-0 top-0" :icon="Delete" :underline="false"
                @click.stop="deleteGraphs(item)"></el-link>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog v-model="dialogVisible" :title="dialogTitle" @sure="sure" @cancel="dialogVisible = false" append-to-body>
      <div class="editor-container-scss">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" label-position="left"
          status-icon>
          <div v-if="dialogType == 'group'">
            <el-form-item :label="titles.groupName" prop="groupName">
              <el-input v-model="ruleForm.groupName" :placeholder="Prompt.groupName" />
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item :label="titles.graphImage" prop="graphImage">
              <ReUpload v-model:files="ruleForm.graphImage" :limit="1" :fileSize='0.5' />
              <!-- <UploadFile v-model:files="changeValues" :limit="1" /> -->
              <!-- <el-input v-model="ruleForm.graphImage" :placeholder="Prompt.graphImage" /> -->
            </el-form-item>
            <el-form-item :label="titles.graphName" prop="graphName">
              <el-input v-model="ruleForm.graphName" :placeholder="Prompt.graphName" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <template #footer>
        <div class="editor-container-scss">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sure">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { Search, EditPen, Delete } from '@element-plus/icons-vue'
import { parseSvg } from '@meta2d/svg'
import { IconGroups, TopoIcons } from '../constant'
import { useTopologyEditorStore } from '@/store/modules/topology-editor'
import type { CollapseActiveName, CollapseModelValue } from 'element-plus'
import { getOtherIcons, pngToPens, svgToPens } from '@/utils/loadCustom'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import ReUpload from '@/components/ReUpload/index.vue'
import { getGraphList, addGraph, editGraph, deleteGraph, getGraphGroupList, addGraphGroup, editGraphGroup, deleteGraphGroup } from '@/api/operate/project-management/configuration-management/index'
import { Plus, MoreFilled, CirclePlusFilled, Grid, Edit } from "@element-plus/icons-vue";
import { getAssetURL } from '@/utils/functions'
defineOptions({
  name: 'EditorProps'
})
const activeName = ref('default')
const route = useRoute()
const store = useTopologyEditorStore()

const icons = reactive(IconGroups)
const topoIcons = reactive(TopoIcons)
let customIcons = reactive([] as any[])
let activeCollapse: CollapseActiveName[] = ['基本形状']
const oftenIcons = store.oftenIcons
const inputValue = ref('')
const drawerSearchValue = ref('')
let searchList = reactive([] as any[])
const drawer = ref(false)
const checkCustomIconsIndex = ref(0)
let drawerShowList = ref([] as any[])
let key = 0
const files = reactive([] as any[])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogType = ref('')
const dialogFun = ref('')
const ruleForm = ref({} as any)
const ruleFormRef = ref<FormInstance>()
const titles = {
  groupName: "分组名称",
  graphName: "素材名称",
  graphImage: "素材图片",
}
const Prompt = {
  groupName: `请输入${titles.groupName}`,
  graphName: `请输入${titles.graphName}`,
  graphImage: `请选择${titles.graphImage}`,
}
const rules = reactive({
  groupName: [{ required: true, message: Prompt.groupName, trigger: 'blur' },],
  graphName: [{ required: true, message: Prompt.graphName, trigger: 'blur' },],
  graphImage: [{ required: true, message: Prompt.graphImage, trigger: 'blur' },],
})
onMounted(() => {
  loadCustomIcons()
})
function loadCustomIcons() {
  // getOtherIcons().then((res) => {
  //   console.log(res)
  //   customIcons.length = 0
  //   customIcons.push(...res.flat(2))
  //   drawerShowList.value = customIcons.filter((i: any) => i.id == tab.id)[0].list
  // })
  getGraphGroupList({ projectId: route.query.projectId }).then((res) => {
    customIcons.length = 0
    Object.assign(customIcons, res.result.data)
    // customIcons = res.result.data
    // customIcons.forEach((item: any) => {
    //   changeState(item)
    // })
    if (customIcons.length !== 0) {
      changeState(customIcons[0]).then(() => {
        checkCustomIconsIndex.value = customIcons[0].id
        drawerShowList.value = []
        drawerShowList.value = customIcons.filter((i: any) => i.id == checkCustomIconsIndex.value)[0].list
      })
    }
  })
}
async function changeState(tab: any) {
  // if (tab.folder) {
  // if (!tab.loaded) {
  // if (activeCollapse.indexOf(tab.groupName) != -1) {
  //   activeCollapse.splice(activeCollapse.indexOf(tab.groupName), 1)
  // }
  // getGraphList({ groupId: tab.id }).then((res) => {
  //   tab.list = res.result.data
  // activeCollapse.push(tab.groupName)
  // tab.list.forEach((item: any) => {
  //   if (item.graphData.name == 'svg') {
  //     item.graphData.pen = parseSvg(item.graphImage)
  //   }
  // })
  // tab.list.forEach((item) => {
  // 没有http开头的使用请求接口地址拼接上图片路径
  // if (item.graphImage.indexOf('http') == -1) {
  //   item.graphImage = `${item.graphImage}`
  // }
  // })

  // })
  let res = await getGraphList({ groupId: tab.id })
  tab.list = res.result.data
  tab.list.forEach(async item => {
    // console.log(item.graphData.pen.name);
    if (item.graphData.pen.name == 'svg') {
      // let pens = parseSvg(await fetch(item.graphImage).then((res) => res.text()))
      // pens[0].name = 'svg'
      // item.graphData.pen=pens
      // console.log(item.graphData.pen);
      item.graphData.pen.name = 'gif'
      let pens = parseSvg(await fetch(item.graphImage).then((res) => res.text()))
      item.graphData.pen.width = pens[0].width
      item.graphData.pen.height = pens[0].height
      // item.graphData.pen.imageRatio = false
    }
  })

  tab.loaded = true
  return tab.list
  // const { data: files } = await axios.get((tab.svg ? '/svg/' : '/png/') + tab.name + '/')
  // tab.loaded = true
  // if (tab.svg) {
  // const fs = await Promise.all(files.map((f: any) => svgToPens(f, tab.name)))
  //   tab.list = fs
  // } else {
  //   const fs = await Promise.all(files.map((f: any) => pngToPens(f, tab.name)))
  //   tab.list = fs
  // }
  // }
  // }
}
async function changeState1(tab: any, index: number) {
  // if (tab.folder) {
  //   if (!tab.loaded) {
  //     const { data: files } = await axios.get((tab.svg ? '/svg/' : '/png/') + tab.name + '/')
  //     tab.loaded = true
  //     if (tab.svg) {
  //       const fs = await Promise.all(files.map((f: any) => svgToPens(f, tab.name)))
  //       tab.list = fs
  //     } else {
  //       const fs = await Promise.all(files.map((f: any) => pngToPens(f, tab.name)))
  //       tab.list = fs
  //     }
  //   }
  // }
  checkCustomIconsIndex.value = tab.id
  changeState(tab).then(() => {
    drawerShowList.value = []
    drawerShowList.value = customIcons.filter((i: any) => i.id == tab.id)[0].list
  })
  // drawerShowList.value = customIcons.filter((i: any) => i.id == tab.id)[0].list
}
function drawerDoSearch(value: any) {
  value = value.trim() // 清除空格
  if (value) {
    // 输入有值
    // 遍历搜索
    drawerShowList.value = []
    drawerShowList.value.push(...customIcons.filter((i: any) => i.id == checkCustomIconsIndex.value)[0].list.filter((i: any) => i.graphName.includes(value)))
  } else {
    drawerShowList.value = []
    drawerShowList.value = customIcons.filter((i: any) => i.id == checkCustomIconsIndex.value)[0].list
  }
}
function dragPen(data: any, e: any) {
  const json = JSON.stringify(data)
  e.dataTransfer.setData('Text', json)
  // store.addOftenIcon(e)
}
function doSearch(value: any) {
  value = value.trim() // 清除空格
  searchList = [] // 重置表格
  if (value) {
    // 输入有值
    // 遍历搜索
    customIcons.forEach((item) => {
      console.log('item', item)
      searchList.push(...item.list.filter((i: any) => i.graphName.includes(value)))
    })
  } else {
    searchList = [] //设置为空
  }
}
const handleClose = (done: () => void) => {
  // ElMessageBox.confirm('确定关闭？', undefined, {
  //   confirmButtonText: '确定',
  //   cancelButtonText: '取消',
  //   type: 'warning',
  //   draggable: true
  // })
  //   .then(() => {
  done()
  // })
  // .catch(() => {
  //   // catch error
  // })
}
function isFolderOpened(name: CollapseActiveName) {
  return activeCollapse.includes(name)
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function onDragstart(e: DragEvent, icons: any[]) {
  const index = e.target && e.target instanceof HTMLElement ? Number(e.target.dataset['index']) : -1
  if (index > -1) {
    const icon = icons[index]
    // console.log('sdasd', JSON.parse(JSON.stringify(icon.pen), (k, v) => {
    //   k=='formatter'&& console.log(v);
    //   if (typeof v === 'string' && v.indexOf && v.indexOf('h =>') > -1) return eval(`(() =>{return ${v}})()`)
    //   return v
    // }));
    console.log(icon.pen);

    e.dataTransfer?.setData('Text', JSON.stringify(icon.pen))
    store.addOftenIcon(icon)
  }
}
function onCollapse(activeNames: CollapseModelValue) {
  activeCollapse = activeNames as CollapseActiveName[]
}
function addGroups() {
  dialogType.value = 'group'
  dialogFun.value = 'add'
  dialogTitle.value = '添加分组'
  dialogVisible.value = true
  ruleForm.value = {
    groupName: ''
  }
}
function editGroups(item: any) {
  dialogType.value = 'group'
  dialogFun.value = 'edit'
  dialogTitle.value = '编辑分组'
  dialogVisible.value = true
  ruleForm.value = {
    id: item.id,
    groupName: item.groupName,
  }
}
function deleteGroups(item: any) {
  ElMessageBox.confirm('此操作将永久删除该分组, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteGraphGroup({
      id: item.id
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success('删除成功')
        loadCustomIcons()
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}
function addGraphs() {
  dialogType.value = 'graph'
  dialogFun.value = 'add'
  dialogTitle.value = '添加素材'
  dialogVisible.value = true
  ruleForm.value = {
    groupId: customIcons.filter((i: any) => i.id == checkCustomIconsIndex.value)[0].id,
    graphName: null,
    graphImage: null,
  }
}
function editGraphs(item: any) {
  dialogType.value = 'graph'
  dialogFun.value = 'edit'
  dialogTitle.value = '编辑素材'
  dialogVisible.value = true
  ruleForm.value = {
    id: item.id,
    groupId: customIcons.filter((i: any) => i.id == checkCustomIconsIndex.value)[0].id,
    graphName: item.graphName,
    graphImage: item.graphImage,
  }
}
function deleteGraphs(item: any) {
  ElMessageBox.confirm('确定要删除该素材吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteGraph({ id: item.id }).then(res => {
      if (res.code === 200) {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        updateGraphs()
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除',
    })
  })
}
function updateGraphs() {
  let tab = customIcons.filter((i: any) => i.id == checkCustomIconsIndex.value)[0]
  getGraphList({ groupId: tab.id }).then((res) => {
    tab.list = res.result.data
    drawerShowList.value = []
    Object.assign(drawerShowList.value, customIcons.filter((i: any) => i.id == tab.id)[0].list)
  })
}
function sure() {
  ruleFormRef.value.validate(valid => {
    if (valid && dialogType.value == 'graph') {
      if (dialogFun.value === 'add') {
        ruleForm.value.groupId = checkCustomIconsIndex.value
        addGraph(ruleForm.value).then(res => {
          if (res.code === 200) {
            ElMessage({
              message: '新增成功',
              type: 'success',
            });
            updateGraphs()
            dialogVisible.value = false
          }
        })
      } else if (dialogFun.value === 'edit') {
        editGraph(ruleForm.value).then(res => {
          if (res.code === 200) {
            ElMessage({
              message: '编辑成功',
              type: 'success',
            });
            updateGraphs()
            dialogVisible.value = false
          }
        })
      }
    } else if (valid && dialogType.value == 'group') {
      ruleForm.value.projectId = route.query.projectId
      if (dialogFun.value === 'add') {
        addGraphGroup(ruleForm.value).then(res => {
          if (res.code === 200) {
            ElMessage({
              message: '新增成功',
              type: 'success',
            });
            loadCustomIcons()
            dialogVisible.value = false
          }
        })
      } else if (dialogFun.value === 'edit') {
        editGraphGroup(ruleForm.value).then(res => {
          if (res.code === 200) {
            ElMessage({
              message: '编辑成功',
              type: 'success',
            });
            loadCustomIcons()
            dialogVisible.value = false
          }
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
@import '@/components/TopologyEditor/assets/editor-variable.scss';

:deep(.el-tabs__header) {
  margin: 0;
}

.editor-icon {
  :deep(.el-tabs__item) {
    padding-left: 20px !important;
  }
}

:deep(.el-collapse) {
  margin-bottom: 50px;
}

.empty {
  width: 100%;
  font-size: 12px;
  color: #afafaf;
  text-align: center;
}

.collapse-title {
  padding: 0 0 0 10px;
}

.collapse-content {
  padding: 0 19px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  //flex-wrap: wrap;
  //margin: auto;
}

.icon {
  flex: 0 40px;
  width: 40px;
  text-align: center;
  height: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  color: $--editor-text-color;

}

.l-icon {
  width: 30px;
  height: 30px;
  border-radius: 3px;
}

.icon:hover {
  background-color: $--editor-icon-hover-color;
}

.icon>i {
  height: 24px;
  font-size: 24px;
}

:deep(.el-collapse-item__content) {
  padding: 0px 0 10px;
}

.iconfont {
  color: rgba(0, 0, 0, 0.5);
}

.drawer-left {
  padding: 10px;
  border: 1px solid #babbbd;
  border-radius: 5px;
  width: 200px;
  margin-right: 10px;

  .drawer-left-btn {
    width: 100%;
    margin-bottom: 10px;
  }
}

.drawer-right {
  border: 1px solid #babbbd;
  border-radius: 5px;
  //width: 800px;
  padding: 10px;
  position: relative;

  .drawer-right-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .drawer-right-box {
    width: 80px;
    text-align: center;
    margin-right: 10px;
    margin-top: 10px;
    font-size: 14px !important;
    word-break: break-all;
    position: relative;

    svg {
      margin: auto;
    }

    img {
      margin: auto;
    }
  }
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
